<template>
  <div ref="main" class="app">

  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted,ref,reactive } from 'vue';
import Api from './api'
let main=ref()
let option=reactive({
    title: {

      text: '第一次学Git ,qqqq',
    },
    tooltip: {},
    legend:{
      data:['销量']
    },
    xAxis: {
      data: []
    },
    yAxis: {},
    series: []
  })
  let option2=reactive({
    xAxis: {
      data: []
    },
    yAxis: {},
    series: []
  })
// 基于准备好的dom，初始化echarts实例
let myChart =null;
const draw=()=>{
  myChart =echarts.init(main.value);
  console.log("myChart=>",myChart); 
  // 使用指定的配置项和数据显示图表
  let option3=Object.assign(option,option2)
  myChart.setOption(option3)
}

onMounted(() => {
  Api.getEchartInfo().then(res=>{
    option2=res.data[0]
    console.log("res=>",res);
    draw()
  })
 
})
</script>
<style scoped>
.app{
  width: 1200px;
  height: 600px;
}
</style>
